<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/vue@3"></script>
<body>
    <div id="app">
        <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
        <span v-for="item in list"><input type="checkbox" @change="checkClick()" v-model="item.check">{{item.name}}</span><br>
        有请其他嘉宾:<input type="text" v-model="newName"><br>
        <input type="file" @change="load($event)"><br>
        <button @click="add()">上传（把信息上传到数组里面）</button><br>
        <button @click="full(true)" >全选</button>
        <button @click="full(false)">全不选</button>
        <button @click="rev()">反选</button><br>
        <span v-for="item in imgs">
            <img :src="item" alt="" style="width: 200px;height: 300px;">
        </span>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                list:[{name:'可爱熊猫',src:'./猫猫/可爱熊猫.png',check:false},
                    {name:'深情大眼',src:'./猫猫/深情大眼.png',check:false},
                    {name:'神秘冷面',src:'./猫猫/神秘冷面.png',check:false},
                    {name:'性感姨姨',src:'./猫猫/性感姨姨.png',check:false}
                ],
                imgs:[],
                all:false,
                fileSrc:'',
                newName:''
            }
        },
        methods: {
            showImages(){
                this.imgs=[]
                this.list.map(v =>{
                    if(v.check){
                        this.imgs.push(v.src)
                    }
                })
            },
            checkClick(){
                let flag = this.list.length//先获得数组长度，赋值给变量
                // 对数组进行遍历，如果碰到check是发蓝色的，flag减一
                this.list.map(v =>{
                    if(v.check==false) flag--
                })
                //如果循环结束后，flag仍然等于数组的长度，则all变量为true
                if(flag==this.list.length){
                    this.all=true
                }else{
                    this.all=false
                }
                this.showImages()
            },
            fullCheck(){
                
                if(this.all){
                    this.list.map(v => {v.check=true})
                }else{
                    this.list.map(v => {v.check=false})
                }
                this.showImages()
            },
            full(st){
                    this.list.map(v => {v.check=st})
                this.showImages()
                this.all=st
            },
            rev(){
                this.list.map(v =>{
                    v.check=!v.check
                })
                this.checkClick()
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc=target.result
                    console.log(this.fileSrc);
                }
            },
            add(){
                if(this.newName !=''){
                    this.list.push({
                    name:this.newName,
                    src:this.fileSrc,
                    check:false
                })
                }else{
                    alert("请输入你要添加的嘉宾姓名")
                }
            }
        }
    }).mount("#app")
</script>